<template>
  <div  v-if="showView"  className="itemized-energy-consumption-chart-container">
    <div className="itemized-energy-consumption-chart-view" id="itemized-energy-consumption-chart-id"></div>
  </div>
  <div v-else className="noData">
    <p><img src="../../../assets/nodata.png"></p>
    <p>暂无数据</p>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {ref, onMounted, onBeforeUnmount} from 'vue';
import _ from "underscore";

export default {
  setup() {
    let waterEleRateChart = null;
    let showView = ref(true);
    // 初始化图表
    const initChart = () => {
      const chartDom = document.getElementById('itemized-energy-consumption-chart-id');
      waterEleRateChart = echarts.init(chartDom);

    };
    const setData = (data) => {
      if (!data) {
        showView.value = false;
        return;
      }
      initChart();
      const option = {
        grid: {
          left: '4%',
          right: '4%',
          bottom: '6%',
          top: '20%',
          padding: '0 0 10 0',
          containLabel: true,
        },
        legend: {//图例组件，颜色和名字
          right: 10,
          top: 0,
          itemGap: 16,
          itemWidth: 18,
          itemHeight: 10,
          textStyle: {
            color: '#a8aab0',
            fontStyle: 'normal',
            fontSize: 12,
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,//坐标轴两边留白
            data: data.month,
            axisLabel: { //坐标轴刻度标签的相关设置。
              interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
              margin: 15,
              textStyle: {
                color: '#6c7174',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
              }
            },
            axisTick: {//坐标轴刻度相关设置。
              show: false,
            },
            axisLine: {//坐标轴轴线相关设置
              show: false,
              lineStyle: {
                color: '#fff',
                opacity: 0.2
              }
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线。
              show: false,
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 5,
            axisLabel: {
              textStyle: {
                color: '#a8aab0',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#fff'],
                opacity: 0.06
              }
            }

          }
        ],
        series: [
          {
            name: '同期',
            type: 'bar',
            data: data.data[0].data,
            barWidth: 10,
            barGap: 0,//柱间距离
            label: {//图形上的文本标签
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#ffffff',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                },
              },
            },
            itemStyle: {//图形样式
              normal: {
                barBorderRadius: [2, 2, 0, 0],
                color: '#4e6de0'
              },
            },
          },
          {
            name: '本期',
            type: 'bar',
            data: data.data[1].data,
            barWidth: 10,
            barGap: .9,//柱间距离
            label: {//图形上的文本标签
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#ffffff',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                },
              },
            },
            itemStyle: {//图形样式
              normal: {
                barBorderRadius: [2, 2, 0, 0],
                color: '#b688dc'
              },
            },
          }
        ]
      };
      waterEleRateChart.setOption(option, true);
    }
    onBeforeUnmount(() => {
      if (waterEleRateChart) {
        waterEleRateChart.dispose();
      }
    });

    return {
      setData,
      showView
    };
  }
};
</script>

<style scoped>
.itemized-energy-consumption-chart-container {
  width: 100%;
  height: 300px;
}

.itemized-energy-consumption-chart-view {
  width: 100%;
  height: 300px;
}
</style>
